<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="../lib//three/three.js"></script>
</head>
<body>

</body>
</html>
<script>
    // 创建一个场景
    const scene = new THREE.Scene()
    // 创建一个相机 视点
    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    // 设置相机的位置
    camera.position.set(0, 0, 40)
    // 创建一个渲染器
    const renderer = new THREE.WebGLRenderer()
    // 设置渲染器尺寸
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement)
    // 添加一个立方体
    const geometry = new THREE.BoxGeometry(10, 10, 10)

    // 创建一个纹理加载器
    const loader = new THREE.TextureLoader()

    // 创建材质
    const Lambert = new THREE.MeshPhongMaterial({
        map: THREE.ImageUtils.loadTexture('../assets/plaster.jpg')
    })
    const mesh = new THREE.Mesh(geometry, Lambert)
    mesh.rotation.y = 0.5
    mesh.position.x = -12
    scene.add(mesh)

    renderer.setClearColor(0xffffff)

    // 创建材质
    const Lambert1 = new THREE.MeshPhongMaterial({
        map: THREE.ImageUtils.loadTexture('../assets/plaster.jpg'),
        normalMap: THREE.ImageUtils.loadTexture('../assets/plaster-normal.jpg'),
    })
    const mesh1 = new THREE.Mesh(geometry, Lambert1)
    mesh1.rotation.y = -0.5
    mesh1.position.x = 12
    scene.add(mesh1)

    // 添加灯光
    const spotLight = new THREE.SpotLight(0xffffff)
    spotLight.position.set(-10, 10, 90)
    scene.add(spotLight)
    const animation = () => {
        // 渲染
        renderer.render(scene, camera)
        requestAnimationFrame(animation)
    }
    animation()
</script>